<template>
  <div>
    <h1>watch函数的使用</h1>
  </div>
  <ul>
    <li>{{ count }}</li>
    <li>
      <button @click="change">+1</button>
    </li>
    <li>{{ person }}</li>
  </ul>
</template>

<script>
import { ref, watch} from 'vue'
export default {
  setup() {
    // watch函数监听一个data变量变化 执行一个回调函数
    // 1. 从vue框架中导入watch函数
    // 2. 在setup函数中执行watch函数开启对响应式数据的监听
    // 3. watch函数接收三个常规参数
    //   1. 第一个参数为函数，返回你要监听变化的响应式数据
    //   2. 第二个参数为响应式数据变化之后要执行的回调函数
    //   3. 第三个参数为一个对象，在里面配置是否开启立刻执行或者深度监听

    // 简单类型
    const count = ref(0)
    // const change = ()=> {
    //   count.value ++
    // }
    watch(
      () => count.value,
      (newVal, oldVal) => console.log('count变化', newVal, oldVal)
    )
    // 复杂类型
    const person = ref({ name: '小王', age: 18 })
    watch(
      () => person.value,
      (newVal, oldVal) => {
        console.log('person变化', newVal, oldVal)
      },
      {
        // 开启深度监听
        deep: true,
        // 开启立即监听
        immediate: true,
      }
    )

    watch(
      () => person.value.age,
      (newVal) => {
        console.log('age变化', newVal)
      }
    )
    const change = () => {
      count.value++
      person.value.age++
    }
    return { count, change, person }
  },
}
</script>

<style></style>
